<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Font feature example - kerning</title>

    <style>
      @font-face {
        font-family: "Plex Serif";
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        src:
          url("fonts/plex/IBMPlexSerif-Regular.woff") format("woff"),
          url("fonts/plex/IBMPlexSerif-Regular.woff2") format("woff2");
      }

      html {
        box-sizing: border-box;
        font-size: 100%;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      body {
        font:
          1.2em "Plex Serif",
          "Times New Roman",
          serif;
        margin: 20px;
        padding: 0;
      }

      .wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
      }

      @media screen and (min-width: 35rem) {
        .wrapper {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media screen and (min-width: 52rem) {
        .wrapper {
          grid-template-columns: 1fr 1fr;
        }
      }

      textarea {
        font-family: monospace;
        display: block;
        margin-bottom: 10px;
        height: 160px;
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        color: #4d4e53;
        padding: 1rem 0;
        width: 100%;
      }

      textarea:nth-of-type(1) {
        height: 130px;
      }

      textarea:nth-of-type(2) {
        height: 100px;
      }

      .playable-buttons {
        text-align: right;
        width: 100%;
        padding: 0.5rem 0;
        font-size: 100%;
      }

      .section {
        width: 100%;
        border: 1px solid #4d4e53;
        border-radius: 2px;
        padding: 10px 14px 10px 10px;
        margin-bottom: 10px;
      }

      .section input {
        display: block;
        margin: 5px;
      }

      .container * {
        font-size: 4rem;
        margin: 1.5rem 0;
      }
    </style>
    <style class="editable1">
      /* kerning: auto|normal|none */
      .container1 * {
        font-kerning: normal;
      }
      .inactive .container1 * {
        font-kerning: none;
      }
    </style>
    <style class="editable2">
      /* 'kern' 1|0 (on or off) */
      .container2 * {
        font-feature-settings: "kern" 1;
      }
      .inactive .container2 * {
        font-feature-settings: "kern" 0;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="demo1">
        <section class="section section1">
          <div class="container container1">
            <p>Puffy Pangolins</p>
          </div>
        </section>
        <textarea class="playable-css1">
/* kerning: auto|normal|none */
.container1 * {
  font-kerning: normal;
}
.inactive .container1 * {
  font-kerning: none;
}</textarea
        >
        <textarea id="code1" class="playable-html1">
<div class="container container1">
  <p>Puffy Pangolins</p>
</div>
</textarea
        >
        <input
          type="checkbox"
          name="demo1_control"
          id="demo1_control"
          value="on"
          checked />
        <label for="demo1_control">Kerning active</label>
      </div>
      <div class="demo2">
        <section class="section section2">
          <div class="container container2">
            <p>Puffy Pangolins</p>
          </div>
        </section>
        <textarea class="playable-css2">
/* 'kern' 1|0 (on or off) */
.container2 * {
  font-feature-settings: 'kern' 1;
}
.inactive .container2 * {
  font-feature-settings: 'kern' 0;
}</textarea
        >
        <textarea id="code2" class="playable-html2">
<div class="container container2">
  <p>Puffy Pangolins</p>
</div></textarea
        >
        <input
          type="checkbox"
          name="demo2_control"
          id="demo2_control"
          value="on"
          checked />
        <label for="demo2_control">Kerning active</label>
      </div>
    </div>
    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script>
    var section1 = document.querySelector(".section1");
    var editable1 = document.querySelector(".editable1");
    var textareaHTML1 = document.querySelector(".playable-html1");
    var textareaCSS1 = document.querySelector(".playable-css1");
    var section2 = document.querySelector(".section2");
    var editable2 = document.querySelector(".editable2");
    var textareaHTML2 = document.querySelector(".playable-html2");
    var textareaCSS2 = document.querySelector(".playable-css2");
    var rangeinput = document.querySelector(".controls--slider");
    var reset = document.getElementById("reset");
    var htmlCode1 = textareaHTML1.value;
    var cssCode1 = textareaCSS1.value;
    var htmlCode2 = textareaHTML2.value;
    var cssCode2 = textareaCSS2.value;
    var demo1_active = document.getElementById("demo1_control");
    var demo2_active = document.getElementById("demo2_control");

    function fillCode() {
      editable1.innerHTML = textareaCSS1.value;
      section1.innerHTML = textareaHTML1.value;
      editable2.innerHTML = textareaCSS2.value;
      section2.innerHTML = textareaHTML2.value;
    }

    reset.addEventListener("click", function () {
      textareaHTML1.value = htmlCode1;
      textareaCSS1.value = cssCode1;
      textareaHTML2.value = htmlCode2;
      textareaCSS2.value = cssCode2;
      demo1_active.checked = true;
      demo1_active.parentNode.classList.remove("inactive");
      demo2_active.checked = true;
      demo2_active.parentNode.classList.remove("inactive");
      fillCode();
    });

    demo1_active.addEventListener("change", function () {
      if (this.checked) {
        this.parentNode.classList.remove("inactive");
      } else {
        this.parentNode.classList.add("inactive");
      }
    });

    demo2_active.addEventListener("change", function () {
      if (this.checked) {
        this.parentNode.classList.remove("inactive");
      } else {
        this.parentNode.classList.add("inactive");
      }
    });

    textareaHTML1.addEventListener("input", fillCode);
    textareaCSS1.addEventListener("input", fillCode);
    textareaHTML2.addEventListener("input", fillCode);
    textareaCSS2.addEventListener("input", fillCode);
    window.addEventListener("load", fillCode);
  </script>
</html>
